<template>
<div class="login" v-if="!$store.state.user.pulling_info">
  <div id="header">
    <div class="header_title">
      <span class="title_con" >SQL学习系统</span>
    </div>
  </div>

  <div id="content">
    <center>
      <div class="con">
      <div class="con_title">
        <span class="con_title_sp">欢迎登录SQL学习系统</span>
      </div>
      <form class="con_panel" @submit.prevent="login">
        <div class="con_input">
          <span>用户名：</span>
          <input v-model="username" type="text" id="username"  placeholder="请输入用户名" required/>
        </div>
        <div class="con_input">
          <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
          <input v-model="password" type="password" id="password" placeholder="请输入密码" required/>
        </div>
        <div class="con_select">
          <input v-model="roleId" type="radio" name="role" value="2" />学生
          <input v-model="roleId" type="radio" name="role" value="1" />教师
          <input v-model="roleId" type="radio" name="role" value="0" />管理员
        </div>
        <div class="error-message">{{ error_message }}</div>
        <div class="r_f">
          <router-link class="reg" :to="{name:'register'}" role="button">注册账号</router-link>
          <router-link class="fgt" :to="{name:'resetPassword'}" role="button">忘记密码？</router-link>
        </div>
        <!-- <input type="submit" value="登录" class="submit-btn"/> -->
        <button type="submit" value="登录" class="submit-btn">登录</button>
      </form>
    </div>
    </center>
  </div>
</div>  
</template>
  


<script>

import {ref} from 'vue';
import {useStore} from 'vuex';
import router from '@/router/index';


  export default{
    name: 'LoginView',
    components:{},


    setup(){
      const store = useStore();
      let username = ref('');
      let password = ref('');
      let roleId = ref('');
      let error_message = ref('');

      const jwt_token = localStorage.getItem("jwt_token");  //从localStorage中获取token
      const rid = localStorage.getItem("rid");
      // console.log(" jwt_token :");
      // console.log(jwt_token);
      // console.log("rid: ");
      // console.log(rid);


      if(jwt_token){

        store.commit("updateToken", jwt_token);   //如果localStorage中存在token, 则直接跳转到首页
        
        store.dispatch("getInfo", {
          success(){
            // console.log("rid:")
            // console.log(rid);
            // console.log(typeof(rid))
            // console.log(" rid.value == 2 :  ");
            // console.log(rid === "2");
            if(rid === '0'){
              router.push({name: 'adminHome'});
            }
            else if(rid === '1'){
              router.push({name: 'teacherHome'});
            }
            else if(rid === '2'){
              router.push({name: "studentHome"});
            }
            else{
              router.push({name: "home"});
           }

              store.commit("updatePullingInfo", false);
          },
          error(){
              store.commit("updatePullingInfo", false);
          }
        })
      }
      else{
              store.commit("updatePullingInfo", false);
      }

      const login= ()=> {
        error_message.value = "";
        store.dispatch("login", {
          username : username.value,
          password : password.value,
          roleId : roleId.value,
          success(resp){
            if(resp.error_message === 'success'){
              store.dispatch("getInfo",{
                  success(){
                    if(roleId.value == 0){
                      router.push({name: 'adminHome'});
                    }
                    else if(roleId.value == 1){
                      router.push({name: 'teacherHome'});
                    }
                    else if(roleId.value == 2){
                     // console.log(roleId.value)
                      router.push({name : 'studentHome'});
                    }
                    else{
                      alert("请选择角色");
                    }
                    //console.log(store.state.user);
                  }
              })
            }
            else{
              error_message.value = resp.error_message;
            }
          },
          error(){
            error_message.value = '登录信息有误';
          }
        })
      }
        return {
          username,
          password,
          roleId ,
          error_message,
          login,
        }

    }

  }

</script>
 



<style scoped>
  body{
    padding: 0px;
    margin: 0px;
  }
  a{
    text-decoration: none;
  }
  .login{
    box-sizing: border-box;
    background-image: url("@/assets/img/bg2.jpg");
    background-size: cover;
  }

  #header{
    width: auto;
    min-height: 70px;
    line-height: 70px;
  }
  /* #header{
    border-bottom: medium solid #fff; 
  } */
  span.title_con{
    display: block;
    text-align:center;
    font-style: normal;
    font-size: 2em;
    font-weight:800 ;
    color: #000;
  }
  #content{
    width: auto;
    height:28em;
    text-align: center;
  }
  #footer{
    width: auto;
    min-height: 60px;
    line-height:60px;
  }
  #footer{
    border-top: thin solid #39A631;
  }
  .con{
    width: 35%;
    height: 24em;
    background-color: #D4E1F2;
    margin-top:1em;
  }
  .con{
    border: 10px solid #84AAD7;
    border-radius: 5px;
  }
  .con_title{
    background-color: #8272c1;
    width: auto;
    height: 3.5em;
    line-height: 3.5em;
    text-align: center;
  }
  .con_title_sp{
    font-size: 1.5em;
    font-weight: 800;
    color: #FFF;
  }
  .con_input{
    margin: 2em 0 1em 0;
  }
  .submit-btn{
    width: 8em;
    height: 2em;
    background-color: #62ab00;
    border-radius: 4px;
    border: 0px;
    color: #fff;

    font-size: 1em;
    font-weight: bold;
  }
  .con_input span{
    font-size: 1em;
    font-weight: bold;
    color: #333;
  }
  .con_input input{
    width: 15em;padding: 0.5em 1em;
    border: 1px solid #bbb;
  }
  .submit-btn{
    margin: 1em 0 2em 0;
  }
  .con_select{
    margin-left: 2em
    ;font-size: 1em;
    color: #333;
    }
  .r_f{
      margin:10px 5px 0px;
    }
  .reg{
    display: inline-block;
    margin-left: 15px ;
    margin-left:10px;
    /* text-align: left; */
  }
  .fgt{
    display: inline-block;
    margin-left: 90px;
    /* text-align: right; */
  }
  .error-message{
    color:red;
 }
</style>
